<template>
  <view class="doctor-chat">
    <!-- 医生信息卡片 -->
    <view class="doctor-card">
      <view class="basic-info">
        <image :src="doctor.avatar" mode="aspectFill" class="avatar" />
        <view class="info">
          <view class="name-title">
            <text class="name">{{ doctor.name }}</text>
            <text class="title">{{ doctor.title }}</text>
          </view>
          <text class="hospital">{{ doctor.hospital }}</text>
          <text class="specialty">{{ doctor.specialty }}</text>
        </view>
      </view>
      <view class="consultation-info">
        <text class="type">图文问诊</text>
        <text class="price">¥{{ doctor.price }}/次</text>
      </view>
    </view>

    <!-- 聊天内容区域 -->
    <scroll-view 
      class="chat-content"
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      @scrolltoupper="loadMoreHistory"
    >
      <!-- 系统提示 -->
      <view class="system-message">
        <text>温馨提示：医生将在24小时内回复您的问题</text>
      </view>

      <!-- 聊天记录 -->
      <view class="message-list">
        <view 
          class="message-item"
          v-for="(msg, index) in messages"
          :key="index"
          :class="msg.type"
        >
          <!-- 用户消息 -->
          <template v-if="msg.type === 'user'">
            <view class="message-content">
              <text>{{ msg.content }}</text>
              <!-- 图片消息 -->
              <view class="image-list" v-if="msg.images?.length">
                <image 
                  v-for="(img, idx) in msg.images"
                  :key="idx"
                  :src="img"
                  mode="aspectFill"
                  @tap="previewImage(msg.images, idx)"
                />
              </view>
              <!-- 病历/报告 -->
              <view class="report-card" v-if="msg.report">
                <image :src="msg.report.icon" mode="aspectFit" class="icon" />
                <view class="info">
                  <text class="name">{{ msg.report.name }}</text>
                  <text class="time">{{ msg.report.time }}</text>
                </view>
              </view>
            </view>
            <image :src="userAvatar" mode="aspectFill" class="avatar" />
          </template>
          
          <!-- 医生消息 -->
          <template v-else>
            <image :src="doctor.avatar" mode="aspectFill" class="avatar" />
            <view class="message-content">
              <rich-text :nodes="formatMessage(msg.content)"></rich-text>
              <!-- 处方信息 -->
              <view class="prescription-card" v-if="msg.prescription">
                <view class="header">
                  <image src="/static/icons/prescription.png" mode="aspectFit" class="icon" />
                  <text class="title">电子处方</text>
                </view>
                <view class="medicine-list">
                  <view 
                    class="medicine-item"
                    v-for="(med, idx) in msg.prescription.medicines"
                    :key="idx"
                  >
                    <text class="name">{{ med.name }}</text>
                    <text class="usage">{{ med.usage }}</text>
                  </view>
                </view>
                <view class="footer">
                  <text class="time">开具时间：{{ msg.prescription.time }}</text>
                  <view class="action-btn" @tap="viewPrescription(msg.prescription)">
                    查看详情
                  </view>
                </view>
              </view>
            </view>
          </template>
        </view>
      </view>
    </scroll-view>

    <!-- 底部输入区域 -->
    <view class="input-area">
      <!-- 工具栏 -->
      <view class="toolbar">
        <view class="tool-item" @tap="chooseImage">
          <text class="iconfont icon-image"></text>
        </view>
        <view class="tool-item" @tap="chooseReport">
          <text class="iconfont icon-report"></text>
        </view>
        <view class="tool-item" @tap="recordVoice">
          <text class="iconfont icon-voice"></text>
        </view>
      </view>
      
      <!-- 输入框 -->
      <view class="input-box">
        <textarea
          v-model="inputContent"
          :adjust-position="false"
          :show-confirm-bar="false"
          :cursor-spacing="20"
          :maxlength="500"
          placeholder="请详细描述您的症状..."
          @focus="onFocus"
          @blur="onBlur"
        />
        <view class="send-btn" :class="{ active: inputContent }" @tap="sendMessage">
          发送
        </view>
      </view>
    </view>

    <!-- 语音输入弹窗 -->
    <uni-popup ref="voicePopup" type="bottom">
      <view class="voice-popup">
        <view class="title">按住说话</view>
        <view 
          class="voice-btn"
          :class="{ recording: isRecording }"
          @touchstart="startRecord"
          @touchend="stopRecord"
        >
          <text class="iconfont icon-mic"></text>
        </view>
        <text class="tip">{{ isRecording ? '松开结束' : '按住开始' }}</text>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

// 医生信息
const doctor = ref({
  avatar: '/static/doctor/avatar.jpg',
  name: '张医生',
  title: '主任医师',
  hospital: '澳门镜湖医院',
  specialty: '擅长：呼吸系统疾病、慢性病管理',
  price: 50
})

// 用户头像
const userAvatar = ref('/static/avatar/default.jpg')

// 聊天记录
const messages = ref([])
const scrollTop = ref(0)

// 输入内容
const inputContent = ref('')
const isRecording = ref(false)

// 发送消息
const sendMessage = async () => {
  if (!inputContent.value.trim()) return
  
  // 添加用户消息
  messages.value.push({
    type: 'user',
    content: inputContent.value
  })
  
  // 清空输入框
  inputContent.value = ''
  
  // 滚动到底部
  await nextTick()
  scrollToBottom()
  
  // 模拟医生回复
  setTimeout(() => {
    messages.value.push({
      type: 'doctor',
      content: '您好,根据您描述的症状...',
      prescription: {
        time: '2024-03-25 10:30',
        medicines: [
          { name: '阿莫西林胶囊', usage: '一次1粒,一日3次' },
          { name: '布洛芬缓释胶囊', usage: '一次1粒,必要时服用' }
        ]
      }
    })
    scrollToBottom()
  }, 1000)
}

// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    const query = uni.createSelectorQuery()
    query.select('.message-list').boundingClientRect()
    query.exec(res => {
      if (res[0]) {
        scrollTop.value = res[0].height
      }
    })
  })
}

// 格式化消息内容
const formatMessage = (content) => {
  return content.replace(/\n/g, '<br>')
}
</script>

<style lang="scss">
.doctor-chat {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: $bg-color;

  .doctor-card {
    background: #fff;
    padding: 30rpx;
    border-bottom: 1rpx solid $border-color;

    .basic-info {
      display: flex;
      margin-bottom: 20rpx;

      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .info {
        flex: 1;

        .name-title {
          margin-bottom: 8rpx;

          .name {
            font-size: 32rpx;
            color: $text-primary;
            font-weight: bold;
            margin-right: 12rpx;
          }

          .title {
            font-size: 26rpx;
            color: $text-regular;
          }
        }

        .hospital {
          font-size: 26rpx;
          color: $text-regular;
          margin-bottom: 8rpx;
          display: block;
        }

        .specialty {
          font-size: 24rpx;
          color: $text-secondary;
        }
      }
    }

    .consultation-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20rpx;
      border-top: 1rpx solid $border-color;

      .type {
        font-size: 26rpx;
        color: $primary-color;
        background: $primary-light;
        padding: 4rpx 12rpx;
        border-radius: $radius-sm;
      }

      .price {
        font-size: 32rpx;
        color: $warning;
        font-weight: bold;
      }
    }
  }

  .chat-content {
    flex: 1;
    padding: 30rpx;
    overflow-y: auto;

    .system-message {
      text-align: center;
      margin-bottom: 30rpx;

      text {
        font-size: 24rpx;
        color: $text-secondary;
        background: rgba($text-secondary, 0.1);
        padding: 8rpx 24rpx;
        border-radius: $radius-xl;
      }
    }

    .message-list {
      .message-item {
        display: flex;
        margin-bottom: 30rpx;

        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          flex-shrink: 0;
        }

        .message-content {
          max-width: 70%;
          margin: 0 20rpx;
          padding: 20rpx;
          border-radius: $radius-lg;
          font-size: 28rpx;
          line-height: 1.5;

          .image-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10rpx;
            margin-top: 16rpx;

            image {
              width: 200rpx;
              height: 200rpx;
              border-radius: $radius-sm;
            }
          }

          .report-card,
          .prescription-card {
            margin-top: 16rpx;
            background: $bg-color;
            border-radius: $radius-lg;
            padding: 20rpx;

            .header {
              display: flex;
              align-items: center;
              margin-bottom: 16rpx;

              .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 12rpx;
              }

              .title {
                font-size: 28rpx;
                color: $text-primary;
                font-weight: bold;
              }
            }

            .medicine-list {
              .medicine-item {
                margin-bottom: 12rpx;

                .name {
                  font-size: 26rpx;
                  color: $text-primary;
                  margin-bottom: 4rpx;
                  display: block;
                }

                .usage {
                  font-size: 24rpx;
                  color: $text-regular;
                }
              }
            }

            .footer {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 16rpx;
              padding-top: 16rpx;
              border-top: 1rpx solid $border-color;

              .time {
                font-size: 24rpx;
                color: $text-secondary;
              }

              .action-btn {
                font-size: 24rpx;
                color: $primary-color;
                background: $primary-light;
                padding: 8rpx 20rpx;
                border-radius: $radius-xl;

                &:active {
                  opacity: 0.8;
                }
              }
            }
          }
        }

        &.user {
          flex-direction: row-reverse;

          .message-content {
            background: $primary-color;
            color: #fff;
          }
        }

        &.doctor {
          .message-content {
            background: #fff;
            color: $text-primary;
          }
        }
      }
    }
  }

  .input-area {
    background: #fff;
    padding: 20rpx 30rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    border-top: 1rpx solid $border-color;

    .toolbar {
      display: flex;
      gap: 30rpx;
      margin-bottom: 20rpx;

      .tool-item {
        .iconfont {
          font-size: 48rpx;
          color: $text-secondary;
        }

        &:active {
          opacity: 0.8;
        }
      }
    }

    .input-box {
      display: flex;
      align-items: flex-end;
      gap: 20rpx;

      textarea {
        flex: 1;
        height: 80rpx;
        background: $bg-color;
        border-radius: $radius-lg;
        padding: 20rpx;
        font-size: 28rpx;
        line-height: 40rpx;
        max-height: 160rpx;
      }

      .send-btn {
        width: 120rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 28rpx;
        color: #fff;
        background: $text-secondary;
        border-radius: $radius-lg;

        &.active {
          background: $primary-gradient;
        }

        &:active {
          transform: scale(0.98);
        }
      }
    }
  }
}
</style> 